﻿@model CustomerServiceCenter.Models.TicketWeiXinModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width" />
    <title>请求信息</title>
    <link href="~/Content/font-awesome.min.css" rel="stylesheet" />
    <link href="~/content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/content/wechat/basic.css" rel="stylesheet" />
    <link href="~/content/wechat/TicketOperationInfo.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="clearfix sth">
            <div class="tag style-bg-green"></div>
            <input id="ticketID" type="hidden" value="@Model.TicketID" />
            <input id="userId" type="hidden" value="@ViewData["User"]" />
            <div class="clearfix">
                <label for="submitDate" class="col-xs-4">提交时间</label>
                <p id="submitDate" class="col-xs-8">@string.Format("{0:yyyy年MM月dd日 HH:mm}", Model.SubmitDate)</p>
            </div>
            <div class="clearfix">
                <label for="issueDesciption" class="col-xs-4">问题描述</label>
                <p id="issueDesciption" class="col-xs-8">@Model.IssueDescription</p>
            </div>
            <div class="clearfix">
                <label for="orderNumber" class="col-xs-4">订单号</label>
                <p id="orderNumber" class="col-xs-8">@Model.OrderNumber</p>
            </div>
            <div class="clearfix">
                <label for="assignerName" class="col-xs-4">技术专员：</label>
                <p id="assignerName" class="col-xs-4">@Model.AssignerName</p>
                @*<i class="fa fa-comment-o col-xs-4 style-green col-xs-pull-1 i-inline">发送消息</i>*@
                @if (Model.Mobile != null)
                {
                    <i id="mobile" class="fa fa-phone col-xs-4 style-green" style="margin: 1% auto;"><a href="tel:@Model.Mobile">拨打专线</a></i>
                }
                else
                {
                    <i class="fa fa-phone col-xs-4 style-green mobile"><a onclick="event.stopPropagation();" href="tel:@Model.OnCall">拨打专线</a></i>
                }
                <input id="email" type="hidden" value="@Model.Email" />
            </div>
        </div>
        <!--获取后台状态后输出-->
        <!--增加ID属性--Changed By kingkang-->

        <div class="clearfix timeLine" id="result">
            <div class="tag style-bg-green"></div>
        </div>

        <!--获取comments记录-->
        
    </div>

    <!--弹出层——再次请求-->      <!--html及css均已完成，但是遮罩层无法覆盖住全部屏幕。-->  
    @*<div class="output col-xs-10 col-xs-offset-1" >
        <div class="clearfix">
            <textarea class="col-xs-12" placeholder="请输入需要再次请求的原因"></textarea>
        </div>
        <div class="clearfix">
            <button class="col-xs-8 col-xs-offset-2 style-bg-blue">确认</button>
        </div>
    </div>
    <div id="hide" ></div>*@

    <footer class="col-xs-12">
        @if (@Model.Status != "请求已关闭")
        {
            if (@Model.Status == "已解决")
            {
                <button id="settled" class="solved col-xs-5 style-bg-blue" style="margin-left: 5.3%;"> 已解决 </button>
                <button id="reopen" class="reRequest col-xs-5 col-xs-offset-1 style-bg-blue">再次请求</button>
            }
            else
            {
                <button class="remind col-xs-5 style-bg-blue" id="remind" style="margin-left: 5.3%;">提醒</button>
                <button class="reRequest col-xs-5 col-xs-offset-1 style-bg-blue" id="ticketcancel">取消请求</button>
            }
        }
    </footer>

    <script src="~/scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        var ticketID = $("#ticketID").val();
        var emil = $("#email").val();
        var userID = $("#userId").val();
        
        $(function () {
            
            getOperationLogData();
            getCommentsData();
            //邮件提醒
            $("#remind").click(function () {
                $.ajax({
                        type: "GET",
                        url: "../api/WeChat/RemindOperator",
                        datatype: "json",
                        data: { "toAddress": $.trim(emil), "ticketID": ticketID },
                        async:true,
                        success: function (data) {
                            alert(data);
                        },
                        error: function (data) {
                            alert("提醒失败，网络故障");
                        },
                    });
            });

            //取消请求
            $("#ticketcancel").click(function () {
                $.ajax({
                    type: "GET",
                    url: "../api/WeChat/CancelTicket",
                    datatype: "json",
                    data: { "ticketID": ticketID },
                    success: function (data) {
                        if (data == null) {
                            alert("取消成功");
                        } else {
                            alert(data);
                        }
                    },
                    error: function (data) {
                        alert("取消失败，网络故障");
                    },
                });
            });


            $("#settled").click(function () {
                location.href = "../WeChat/EvaluatePage?ticketId=" + ticketID;
            });

            //再次请求
            $("#reopen").click(function () {
                var str = prompt("请输入再次请求的原因:");
                if (str != null && str != "") {
                    
                    location.href = "../WeChat/ModifyStatus?ticketID=" + ticketID + "&comments=" + str + "&status=0";
                }
            })
        });
        //获取操作日志
        function getOperationLogData() {
            $.ajax({
                type: "GET",
                url: "../api/WeChat/GetTicketsLogs",
                datatype: "json",
                data: { "ticketID": ticketID },
                success: function (data) {
                    if (data == null) {
                        //$("#result").css("display", "inline");
                    } else {
                        var datahtml = "";
                        $.each(data, function (i, result) {
                            /*ticket状态跟踪*/
                            datahtml = datahtml + '<div class="clearfix">' +
                                        '<div class="col-xs-5 txt-center t">' +
                                            '<p>' + result.OperationTime + '</p>' +
                                        '</div>' +
                                        '<div class="transport col-xs-1">' +
                                            '<div class="point style-bg-gray"></div>' +
                                            '<div class="line style-bg-gray"></div>' +
                                        '</div>' +
                                        '<div class="col-xs-5">' +
                                            '<p>' + result.OperationName + '</p>' +
                                            '<hr/>' +
                                        '</div>' +
                                     '</div>';
                        })
                        $("#result").append(datahtml);
                        //给最后一行的数据添加绿色样式
                        $("#result").children().last().addClass("style-green");
                        $("#result").children().last().find(".point").removeClass("style-bg-gray").addClass("style-bg-green");
                        $("#result").children().last().find(".line").remove();          //去掉线
                    }
                }
            });
        }
        //获取操作过程中的备注信息列表
        function getCommentsData() {
            
            $.ajax({
                type: "GET",
                url: "../api/Tickets/GetCommentsHistory",
                datatype: "json",
                data: { "ticketID": ticketID },
                success: function (backdata) {
                    if (backdata == null) {
                        //$("#comments").css("display", "inline");
                    } else {
                        var comments = '<div id="comments" class="clearfix"><div class="tag style-bg-green"></div></div>';
                        var commentshtml = "";
                        
                        $.each(backdata, function (i, result) {
                            if (userID == result.ActorName) {
                                commentshtml = commentshtml + '<div class="col-xs-12"><p>' +
                                    '我：' + result.Comments + '</p></div>';
                            } else {
                                commentshtml = commentshtml + '<div class="col-xs-12"><p>' +
                                    '工程师：' + result.Comments + '</p></div>';
                            }
                        });
                        $(".container").append(comments);
                        $("#comments").append(commentshtml);
                    }
                }



            });
        }
    </script>
</body>
</html>
